<template>
  <div class="travel-advice-container">
    <el-row :gutter="20">
      <!-- 左侧路线规划区域 -->
      <el-col :span="6">
        <el-card class="route-panel">
          <template #header>
            <div class="panel-header">
              <span class="title">路线规划</span>
            </div>
          </template>

          <!-- 出行方式选择 -->
          <div class="travel-mode-group">
            <el-radio-group v-model="travelMode" size="default" class="travel-mode-buttons">
              <el-radio-button :value="travelModeMap.driving">
                <div class="mode-item">
                  <el-icon><Guide /></el-icon>
                  <span>驾车</span>
                </div>
              </el-radio-button>
              <el-radio-button :value="travelModeMap.riding">
                <div class="mode-item">
                  <el-icon><Bicycle /></el-icon>
                  <span>骑行</span>
                </div>
              </el-radio-button>
              <el-radio-button :value="travelModeMap.walking">
                <div class="mode-item">
                  <el-icon><Position /></el-icon>
                  <span>步行</span>
                </div>
              </el-radio-button>
              <el-radio-button :value="travelModeMap.transit">
                <div class="mode-item">
                  <el-icon><Van /></el-icon>
                  <span>公交</span>
                </div>
              </el-radio-button>
            </el-radio-group>
          </div>

          <!-- 地点输入区域 -->
          <div class="location-inputs">
            <el-input v-model="startPoint" placeholder="起点" size="large" class="location-input">
              <template #prefix>
                <el-icon><Position /></el-icon>
              </template>
            </el-input>
            <div class="location-divider">
              <el-button circle size="small" type="info" plain @click="swapLocations">
                <el-icon><Sort /></el-icon>
              </el-button>
            </div>
            <el-input v-model="endPoint" placeholder="终点" size="large" class="location-input">
              <template #prefix>
                <el-icon><Location /></el-icon>
              </template>
            </el-input>
          </div>

          <!-- 路线偏好设置 -->
          <div class="route-options" v-if="travelMode === 'driving'">
            <el-select
              v-model="routePreference"
              placeholder="路线偏好"
              size="large"
              class="preference-select"
            >
              <el-option label="常规路线" value="0" />
              <el-option label="时间最短" value="1" />
              <el-option label="不走高速" value="2" />
              <el-option label="避开拥堵" value="3" />
              <el-option label="距离最短" value="4" />
              <el-option label="花费最少" value="5" />
              <el-option label="大路优先" value="6" />
            </el-select>
          </div>

          <!-- 查询按钮 -->
          <el-button
            type="primary"
            @click="searchRoute"
            :loading="loading"
            size="large"
            class="search-button"
          >
            查询路线
          </el-button>
        </el-card>
      </el-col>

      <!-- 右侧内容区域 -->
      <el-col :span="18">
        <div class="content-panel">
          <el-tabs v-model="activeTab" class="route-tabs">
            <el-tab-pane label="地图导航" name="map">
              <map-navigation :route-data="routeData" :travel-mode="travelMode" />
            </el-tab-pane>
            <el-tab-pane label="文字描述" name="text">
              <text-description :route-data="routeData" :travel-mode="travelMode" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Guide, Bicycle, Position, Van, Location, Sort } from "@element-plus/icons-vue";

import MapNavigation from "./components/MapNavigation.vue";
import TextDescription from "./components/TextDescription.vue";

import { getTravelPlan } from "@/apis/travel";

type Vehicle = {
  direct_text: string;
  end_name: string;
  end_time: string;
  line_color: string;
  name: string;
  start_name: string;
  start_time: string;
  stop_num: number;
  total_price: number;
};

type Step = {
  distance: number;
  duration: number;
  instruction: string;
  path: string;
  type?: number;
  vehicle?: Vehicle;
  traffic_condition?: Array<{
    status: number;
    geo_cnt: number;
  }>;
  start_location?: {
    lat: number;
    lng: number;
  };
  end_location?: {
    lat: number;
    lng: number;
  };
};

type RouteData = {
  distance: number;
  duration: number;
  steps: Step[];
  line_price?: Array<{
    line_price: number;
    line_type: number;
  }>;
  price?: number;
};

// 状态管理
const activeTab = ref("map");
const loading = ref(false);

const travelMode = ref<"driving" | "cycling" | "walking" | "transit">("driving");
const routePreference = ref("0");
// const startPoint = ref("武汉市汉口站");
// const endPoint = ref("武汉市后湖站");
const startPoint = ref("");
const endPoint = ref("");

const routeData = ref<RouteData | null>(null);

const travelModeMap = {
  driving: "driving",
  riding: "riding",
  walking: "walking",
  transit: "transit",
};

// 交换起点和终点
const swapLocations = () => {
  [startPoint.value, endPoint.value] = [endPoint.value, startPoint.value];
};

// 搜索路线
const searchRoute = async () => {
  if (!startPoint.value || !endPoint.value) {
    ElMessage.warning("请输入起点和终点");
    return;
  }

  loading.value = true;
  try {
    const response = await getTravelPlan({
      start_address: startPoint.value,
      end_address: endPoint.value,
      travel_mode: travelMode.value,
      travel_preference: routePreference.value,
    });

    if (response.data) {
      // 处理返回的数据
      if (
        travelMode.value === "transit" &&
        response.data.routes &&
        response.data.routes.length > 0
      ) {
        // 公交路线，直接传递整个路线数据
        routeData.value = response.data;
      } else {
        // 其他出行方式
        routeData.value = {
          distance: response.data.distance,
          duration: response.data.duration,
          steps: response.data.steps.map((step: any) => ({
            ...step,
            type: travelMode.value === "driving" ? 1 : 5, // 1-驾车, 5-步行/骑行
          })),
        };
      }

      ElMessage.success("获取路线成功");
    }
  } catch (error) {
    console.error("获取路线失败:", error);
    ElMessage.error("获取路线失败，请重试");
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.travel-advice-container {
  height: calc(100vh - 100px);

  .route-panel {
    height: 100%;

    .panel-header {
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .travel-mode-group {
      margin-bottom: 20px;

      .travel-mode-buttons {
        width: 100%;
        display: flex;

        :deep(.el-radio-button) {
          flex: 1;

          .el-radio-button__inner {
            width: 100%;
            padding: 8px 0;
            border-radius: 0;
          }

          &:first-child {
            .el-radio-button__inner {
              border-radius: 4px 0 0 4px;
            }
          }

          &:last-child {
            .el-radio-button__inner {
              border-radius: 0 4px 4px 0;
            }
          }
        }

        .mode-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;

          .el-icon {
            font-size: 16px;
          }

          span {
            font-size: 12px;
          }
        }
      }
    }

    .location-inputs {
      position: relative;
      margin-bottom: 20px;

      .location-input {
        margin-bottom: 10px;
      }

      .location-divider {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }

    .route-options {
      margin-bottom: 20px;

      .preference-select {
        width: 100%;
      }
    }

    .search-button {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .content-panel {
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .route-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 55px);

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
